<!DCOTYPE html>
 <html lang="en">
	<com>

	   <head>
        <meta charset="UTF-8">
         <meta name="Viewport" content="width=divider-width,user-scalable=0,initial-scale=1,maximum-scale=1">
        <style>
            /* .com{background-color:#666;} */
        	html{height:100%;}
        	body{background:url('img/bg.jpg');
	    	background-size:100% 100%;
            background-position;
            background-repeat:no-repeat;
	    }

            .bracket{
            	position:absolute;
            	left:50%;
            	transform:translateX(-50%);
            	top: 220px;
            }

        main{
        	position:absolute;
        	    width:400px;
        	    height:400px;
            	left:34%;
            	transform:translateX(-50%);
            	background:url('img/fsw.png');
            	background-size:400px 400px;
            	animation:circle 10s infinite linear;
            	

        }

        .happy{
        	position:absolute;
        	left:51%;
        	transform:translateX(-50%);
        	top:130px;
        	z-index:999;
        }
         @keyframes move{
        	0%{
        		transform:rotate(0deg);
        	}
        	100%{
        		transform:rotate(360deg);
        	}
        }
        @keyframes circle{
        	0%{
        		transform:rotate(0deg);
        	}
        	100%{
        		transform:rotate(360deg);
        	}
        }
        
        main img{
        	width:60px;
        	position:absolute;
        	animation:circle 10s infinite linear;
        	transform-origin:center 0px;
        }
        main img:nth-of-type(1){
        	left:-11px;
        	top:193px;
        }
        main img:nth-of-type(2){
        	left:43px;
        	top:67px;
        }
        main img:nth-of-type(3){
        	left:183px;
        	top:15px;
        }
        main img:nth-of-type(4){
        	left:305px;
        	top:66px;
        }
        main img:nth-of-type(5){
        	left:357px;
        	top:189px;
        }
        main img:nth-of-type(6){
        	left:317px;
        	top:324px;
        }
        main img:nth-of-type(7){
        	left:176px;
        	top:376px;
        }
        main img:nth-of-type(8){
        	left:38px;
        	top:317px;
        }
        
        }

    	</style>
	    </head>

	    <body>
	    
	    <div align="center"><img src="img/bracket.png" alt="主体" class="bracket">
	    <main>
	    <img alt="" src="img/girl.png">
	    <img alt="" src="img/dog.png">
	    <img alt="" src="img/dog.png">
	    <img alt="" src="img/dog.png">
	    <img alt="" src="img/dog.png">
	    <img alt="" src="img/dog.png">
	    <img alt="" src="img/dog.png">
	    <img alt="" src="img/dog.png">
	   

	    </main>
	    <img alt="开心" src="img/happy2.png" class="happy">
         
        </div>

	    


	      <!-- <print>测试测试</print> -->

	    </body>
	        <audio src="media/TKZC.mp3" autoplay loop></audio>
	</com>
</html>